<!--经纪人结佣管理详情-->
<template>
  <div class="brokerDetail">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/brokerCommission' }">经纪人结佣申请</el-breadcrumb-item>
      <el-breadcrumb-item v-if="seeOrToExamine == 1">查看详情</el-breadcrumb-item>
      <el-breadcrumb-item v-else>审核详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="item">
      <p class="textTitle">经纪人基本信息</p>
      <table class="tables">
        <tr>
          <td>姓名</td>
          <td>证件类型</td>
          <td>证件号码</td>
          <td>手机号码</td>
        </tr>
        <tr>
          <td>{{info.idCardName}}</td>
          <td>{{info.cardType == 1 ? '身份证': ''}}</td>
          <td>{{info.idCard}}</td>
          <td>{{info.brokerPhone}}</td>
        </tr>
      </table>
    </div>
    <div class="item">
      <p class="textTitle">证件照片</p>
      <div class="item-group">
        <viewer :images="images">
          <img style="cursor:pointer" v-for="(src,index) in images" :src="src" :key="index" />
        </viewer>
      </div>
    </div>
    <div class="item" v-if="seeOrToExamine == 2 && role">
      <p class="textTitle">佣金结算信息</p>
      <div style="padding-left:15px">
        <p>申请结佣金额:{{info.applyAmount}}元</p>
        <p>税率:{{info.taxBrokerageRate}}%</p>
        <p>税金:{{info.shouldDeductTaxes}}元</p>
        <p>应付金额:{{info.payBrokerage}}元</p>
      </div>
    </div>
    <div class="item" v-if="seeOrToExamine == 2 && role">
      <p class="textTitle">结算付款信息</p>
      <el-form :model="ruleForm" :inline="true" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="票据方式：" prop="billWay">
          <el-select v-model="ruleForm.billWay" placeholder="请选择">
            <el-option label="无" :value="1"></el-option>
            <el-option label="发票" :value="2"></el-option>
            <el-option label="收据" :value="3"></el-option>
            <el-option label="发票欠收单" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款结算方式：" prop="payType">
          <el-select v-model="ruleForm.payType" placeholder="请选择">
            <el-option label="通过银企直连付款（对公）" :value="1"></el-option>
            <el-option label="通过银企直连付款（对私）" :value="2"></el-option>
            <el-option label="转账" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计税方式：" prop="taxCalculationWay">
          <el-select v-model="ruleForm.taxCalculationWay" placeholder="请选择">
            <el-option label="一般" :value="1"></el-option>
            <el-option label="简易" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有发票：" prop="billHave">
          <el-select @change="billHaveChange" v-model="ruleForm.billHave" placeholder="请选择">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isShowBill" label="发票类型：" prop="billType">
          <el-select v-model="ruleForm.billType" placeholder="请选择">
            <el-option label="普通发票" :value="1"></el-option>
            <el-option label="增值税专用发票" :value="2"></el-option>
            <el-option label="其他可抵扣发票" :value="3"></el-option>
            <el-option label="其他票据" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款摘要：">
          <el-input maxlength="150" v-model="ruleForm.payNote" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="item" v-else>
      <p class="textTitle">佣金结算信息</p>
      <table class="commissionInfo">
        <tr>
          <td>申请结佣金额（元）</td>
          <td>{{info.applyAmount}}</td>
        </tr>
        <tr>
          <td>税率（比例）</td>
          <td>
            <span v-if="seeOrToExamine == 2 && !role">
              <el-input
                @input="oninput"
                size="mini"
                style="width:150px;display:inline-block"
                v-model="taxBrokerageRate"
              ></el-input>
              <span>%</span>
            </span>
            <span v-else>{{info.taxBrokerageRate}}%</span>
          </td>
        </tr>
        <tr>
          <td>税金（元）</td>
          <td>{{info.shouldDeductTaxes}}</td>
        </tr>
        <tr>
          <td>应付金额（元）</td>
          <td>{{info.payBrokerage}}</td>
        </tr>
        <tr>
          <td>付款结算方式</td>
          <td>{{payType}}</td>
        </tr>
        <tr>
          <td>票据方式</td>
          <td>{{billWay}}</td>
        </tr>
        <tr>
          <td>计税方式</td>
          <td>{{info.taxCalculationWay == 1 ? '一般' : '简易'}}</td>
        </tr>
        <tr>
          <td>是否有发票</td>
          <td>{{info.billHave == 1 ? '是' : '否'}}</td>
        </tr>
        <tr v-if="info.billHave == 1">
          <td>发票类型</td>
          <td>{{billType}}</td>
        </tr>
        <tr>
          <td>付款摘要</td>
          <td>{{info.payNote}}</td>
        </tr>
      </table>
    </div>
    <div class="item">
      <p class="textTitle">收款账号信息</p>
      <table class="collectioAndPayment">
        <tr>
          <td>收款人</td>
          <td>{{info.idCardName}}</td>
          <td>收款账号</td>
          <td>{{info.bankCard}}</td>
          <td>开卡省-市</td>
          <td>{{info.recProvinceName}} — {{info.recCityName}}</td>
        </tr>
        <tr>
          <td>开户支行</td>
          <td>{{info.bankBranchName}}</td>
          <td>联行号</td>
          <td>{{info.bankBranchNum}}</td>
          <td>地区代码</td>
          <td>{{info.openCode}}</td>
        </tr>
      </table>
    </div>
    <div class="item" style="position:relative">
      <p class="textTitle">付款账号信息</p>
      <p v-if="seeOrToExamine == 2 && role" @click="dialogPaymentAccount" class="Payment">
        <i class="el-icon-edit-outline"></i>修改付款账号
      </p>
      <table class="collectioAndPayment">
        <tr>
          <td>付款公司</td>
          <td>{{info.payerCompany}}</td>
          <td>付款账号</td>
          <td>{{info.payerAccount}}</td>
          <td>开户支行</td>
          <td>{{info.payerBranchBankName}}</td>
        </tr>
        <tr>
          <td>纳税人识别号</td>
          <td>{{info.payerIdentityNum}}</td>
          <td>—</td>
          <td>—</td>
          <td>—</td>
          <td>—</td>
        </tr>
      </table>
    </div>
    <div class="item">
      <p class="textTitle">订单信息</p>
      <el-table :data="tableData" border>
        <el-table-column align="center" :index="indexFun" type="index" label="序号"></el-table-column>
        <template v-for="colConfig in colConfigs">
          <el-table-column align="center" v-bind="colConfig" :key="colConfig.id"></el-table-column>
        </template>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="orderDetail(scope.row.orderId)"
              v-if="scope.$index != 0"
            >订单详情</el-button>
            <span v-else>——</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        style="margin-top:15px;"
        layout="total, sizes, prev, pager, next"
        :current-page="form.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <div class="item">
      <p class="textTitle">结佣审批流程</p>
      <div class="technologicalProcess">
        <el-steps align-center :active="flowChart">
          <el-step title="提交审核"></el-step>
          <el-step title="运营审核"></el-step>
          <el-step title="财务审核"></el-step>
          <el-step title="H3审核"></el-step>
        </el-steps>
      </div>
    </div>
    <div class="item" v-if="seeOrToExamine == 1 || (seeOrToExamine == 2 && again)">
      <p class="textTitle">审批记录</p>
      <el-table :data="records" border style="width: 100%">
        <el-table-column align="center" prop="system" label="系统"></el-table-column>
        <el-table-column align="center" prop="auditStatus" label="操作"></el-table-column>
        <el-table-column align="center" prop="remark" label="审批意见"></el-table-column>
        <el-table-column align="center" prop="submitPersonName" label="操作人"></el-table-column>
        <el-table-column align="center" prop="roleType" label="角色"></el-table-column>
        <el-table-column align="center" :formatter="recordsTime" prop="createTime" label="时间"></el-table-column>
      </el-table>
    </div>
    <div v-if="seeOrToExamine == 2 && !again" class="AudiReason">
      <div class="textTitle">审核理由</div>
      <el-input
        maxlength="150"
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 7}"
        placeholder="请输入审核理由"
        v-model="reason"
      ></el-input>
      <span class="resasonNum">{{reason.length}}/{{150 - reason.length}}</span>
      <p style="text-align:center;">
        <el-button type="primary" @click="agree">通过</el-button>
        <el-button type="primary" @click="refuse">拒绝</el-button>
      </p>
    </div>
    <div v-if="seeOrToExamine == 2 && again" class="AudiReason">
      <div class="textTitle">调整说明</div>
      <el-input
        maxlength="150"
        type="textarea"
        :autosize="{ minRows: 3, maxRows: 7}"
        v-model="reason"
      ></el-input>
      <span class="resasonNum">{{reason.length}}/{{150 - reason.length}}</span>
      <p style="text-align:center;">
        <el-button type="primary" @click="againSubmit">重新提交</el-button>
        <el-button type="primary" @click="RejectSubmit">驳回</el-button>
        <el-button type="primary" @click="cancelSubmit">取消</el-button>
      </p>
    </div>
    <!--修改付款账号-->
    <el-dialog title="修改付款账号" :visible.sync="dialogTableVisible">
      <el-form :model="PaymentForm" :rules="PaymentRules" ref="PaymentForm" label-width="180px">
        <el-form-item label="数据源：">
          <span>内部法人管理</span>
        </el-form-item>
        <el-form-item label="付款公司：" prop="payerCompanyId">
          <el-select
            filterable
            @change="acountCompanyChange"
            v-model="PaymentForm.payerCompanyId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in paymentCompany"
              :key="item.id"
              :label="item.companyName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账户：" prop="payerAccountId">
          <el-select
            @change="accountChange"
            filterable
            v-model="PaymentForm.payerAccountId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in account"
              :key="item.id"
              :label="item.bankAccount"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户行名称（支行）：">
          <span>{{accountData.payerBranchBankName}}</span>
        </el-form-item>
        <el-form-item label="纳税人识别号：">
          <span>{{accountData.payerIdentityNum}}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="accountSubmitForm('PaymentForm')">确定</el-button>
          <el-button @click="accountResetForm('PaymentForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import utils from "@/common/utils";
import api from "@/api/apiPath";
export default {
  name: "brokerCommissionDetail",
  data() {
    return {
      dialogTableVisible: false,
      isFinance: true, // 是否是财务角色
      isShowBill: false, // 是否显示发票类型
      isShowAccount: true,
      paymentCompany: [],
      account: [], // 账户列表
      PaymentForm: {
        payerCompanyId: "",
        payerAccountId: ""
      },
      // 审核
      reason: "", // 驳回理由
      ruleForm: {
        billWay: "",
        payType: "",
        taxCalculationWay: "",
        taxBrokerageRate: "", // 税率
        billHave: "",
        billType: "",
        payNote: "",
        reason: "",
        // 付款公司信息
        payerCompany: "", // 公司
        payerAccount: "", // 账户
        payerIdentityNum: "", // 纳税人识别号
        payerBranchBankName: "", // 支行名称
        paymentId: "", // 付款方id
        paymentCode: ""
      },
      taxBrokerageRate: "",
      rules: {
        billWay: [
          { required: true, message: "请选择票据方式", trigger: "change" }
        ],
        payType: [
          { required: true, message: "请选择付款结算方式", trigger: "change" }
        ],
        taxCalculationWay: [
          { required: true, message: "请选择计税方式", trigger: "change" }
        ],
        billHave: [
          { required: true, message: "请选择是否有发票", trigger: "change" }
        ],
        billType: [
          { required: true, message: "请选择发票类型", trigger: "change" }
        ]
      },
      PaymentRules: {
        payerCompanyId: [
          { required: true, message: "请选择付款公司", trigger: "change" }
        ],
        payerAccountId: [
          { required: true, message: "请选择账户", trigger: "change" }
        ]
      },
      form: {
        id: "",
        pageNum: 1,
        pageSize: 10
      },
      colConfigs: [
        { prop: "brokerRoleType", label: "角色" },
        { prop: "brokerName", label: "经纪人姓名" },
        { prop: "brokerageProportion", label: "分佣比例" },
        { prop: "brokerPhone", label: "经纪人手机号" },
        { prop: "customerName", label: "客户姓名" },
        {
          prop: "customerPhone",
          label: "客户手机号",
          formatter: this.customerPhone
        },
        { prop: "devName", label: "楼盘名称", "show-overflow-tooltip": true },
        { prop: "buildName", label: "楼栋" },
        { prop: "unit", label: "单元" },
        { prop: "cellName", label: "房号" },
        { prop: "nodeName", label: "结佣类别" },
        { prop: "creatTime", label: "时间", formatter: this.initTime },
        { prop: "devAmount", label: "房款" },
        { prop: "dealAmount", label: "成交价" },
        { prop: "shouldAmount", label: "应结佣金额（元）" },
        { prop: "broShouldAmount", label: "经纪人应结佣金额（元）" }
      ],
      tableData: [],
      total: 0,
      info: {},
      records: [],
      seeOrToExamine: 1, // 查看or 审核 or 重新提交
      role: "", // 角色
      again: false, // 是否是重新提交
      accountData: {
        payerCompany: "",
        payerIdentityNum: "",
        payerAccount: "",
        payerBranchBankName: "",
        paymentId: "",
        paymentCode: ""
      }
    };
  },
  computed: {
    payType() {
      if (this.info.payType == 1) {
        return "通过银企直连付款（对公）";
      } else if (this.info.payType == 2) {
        return "通过银企直连付款（对私）";
      } else {
        return "转账";
      }
    },
    billWay() {
      if (this.info.billWay == 1) {
        return "无";
      } else if (this.info.billWay == 2) {
        return "发票";
      } else if (this.info.billWay == 3) {
        return "收据";
      } else {
        return "发票欠收单";
      }
    },
    billType() {
      if (this.info.billType == 1) {
        return "普通发票";
      } else if (this.info.billType == 2) {
        return "增值税专用发票";
      } else if (this.info.billType == 3) {
        return "其他可抵扣发票";
      } else {
        return "其他票据";
      }
    },
    flowChart() {
      let status = 0;
      if (this.info.bpmAuditStatus == 2) {
        return (status = 4);
      }
      if (this.info.examineState == 1) {
        status = 1;
      } else if (this.info.examineState == 2) {
        status = 2;
      } else if (this.info.examineState == 3) {
        status = 3;
      }
      return status;
    },
    images() {
      let img = [];
      img.push(this.info.idCardFront);
      img.push(this.info.idCardBack);
      return img;
    }
  },
  created() {
    // 1 是查看， 2是审核
    this.seeOrToExamine = this.$route.query.num;
    this.again = this.$route.query.again;
    let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
    if (role == "运营人员") {
      this.role = true;
    } else {
      this.role = false;
    }
    this.form.id = this.$route.query.id;
    this.detail();
    this.orderList();
  },
  methods: {
    customerPhone(row) {
      if (row.customerPhone !== "——") {
        return utils.formatPhoneNumber(row.customerPhone);
      } else {
        return "——";
      }
    },
    oninput(e) {
      // 通过正则过滤小数点后两位
      e = e.match(/^\d*(\.?\d{0,2})/g)[0] || 0;
      if (e >= 100) {
        this.taxBrokerageRate = 0;
      } else {
        this.taxBrokerageRate = parseInt(e);
      }
      this.info.payBrokerage = utils.formatFloat(this.info.applyAmount / (1 + parseFloat(this.taxBrokerageRate / 100)),2);
      this.info.shouldDeductTaxes = utils.formatFloat(this.info.applyAmount - this.info.payBrokerage,2);
    },
    // 发票change事件
    billHaveChange(val) {
      if (val == 1) {
        this.isShowBill = true;
      } else {
        this.isShowBill = false;
      }
    },
    dialogPaymentAccount() {
      this.dialogTableVisible = true;
      this.$axios.post(api.SEARCHBANKLIST).then(res => {
        this.paymentCompany = res;
      });
    },
    // 付款公司change
    acountCompanyChange(val) {
      this.account = [];
      this.accountData.payerIdentityNum = "";
      this.PaymentForm.payerAccountId = "";
      let obj = this.paymentCompany.find(item => {
        return item.id === val;
      });
      this.account = obj.bank;
      this.accountData.payerCompany = obj.companyName; // 公司名称
      this.accountData.payerIdentityNum = obj.companyTaxpayer; // 纳税人识别号
      this.accountData.paymentId = obj.id; // 公司id
      this.accountData.paymentCode = obj.companyRelatedCode; // code
    },
    // 账户change
    accountChange(val) {
      this.accountData.payerBranchBankName = "";
      let obj = this.account.find(item => {
        return item.id === val;
      });
      this.accountData.payerAccount = obj.bankAccount; // 账户
      this.accountData.payerBranchBankName = obj.openingBank; // 支行名称
    },
    // 修改账户提交
    accountSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.info.payerCompany = this.accountData.payerCompany;
          this.info.payerIdentityNum = this.accountData.payerIdentityNum;
          this.info.payerAccount = this.accountData.payerAccount;
          this.info.payerBranchBankName = this.accountData.payerBranchBankName;
          // 没办法（必须得找个中间值代替一下 要不用户修改后没有提交 也会改变数据）
          this.ruleForm.payerCompany = this.accountData.payerCompany;
          this.ruleForm.payerIdentityNum = this.accountData.payerIdentityNum;
          this.ruleForm.payerAccount = this.accountData.payerAccount;
          this.ruleForm.payerBranchBankName = this.accountData.payerBranchBankName;
          this.ruleForm.paymentId = this.accountData.paymentId;
          this.ruleForm.paymentCode = this.accountData.paymentCode;
          this.dialogTableVisible = false;
        }
      });
    },
    accountResetForm(formName) {
      this.accountData.paymentId = "";
      this.accountData.paymentCode = "";
      this.accountData.payerBranchBankName = "";
      this.accountData.payerIdentityNum = "";
      this.dialogTableVisible = false;
      this.$refs[formName].resetFields();
    },
    indexFun(index) {
      if (index == 0) {
        return "合计";
      }
      return index;
    },
    initTime(row, column, cellValue, index) {
      if (index == 0) {
        return "——";
      }
      return utils.getTimeString(row.creatTime);
    },
    recordsTime(row) {
      return utils.getTimeString(row.createTime);
    },
    orderDetail(orderId) {
      this.$router.push({
        path: "./detailorder",
        query: { orderId: orderId, type: 8 }
      });
    },
    auditStatus(status) {
      if (status == 1) {
        return "待审核";
      } else if (status == 2) {
        return "运营审核通过";
      } else if (status == 3) {
        return "财务审核通过";
      } else if (status == 4) {
        return "运营审核拒绝";
      } else if (status == 5) {
        return "财务审核拒绝";
      } else if (status == 6) {
        return "H3审核拒绝";
      }
    },
    detail() {
      let id = this.$route.query.id;
      this.$axios.get(api.brokerAudit + id).then(res => {
        this.info = res;
        let role = JSON.parse(window.localStorage.getItem("cmsUser"))
          .roleName;
        if (role == "运营人员") {
          this.ruleForm = this.info;
          // console.log(this.ruleForm)
          /* this.ruleForm.billWay = this.info.billWay;
            this.ruleForm.payType = this.info.payType;
            this.ruleForm.taxCalculationWay = this.info.taxCalculationWay;
            this.ruleForm.billHave = this.info.billHave;
            this.ruleForm.billType = this.info.billType;
            this.ruleForm.paymentId = this.info.paymentId;
            this.ruleForm.paymentCode = this.info.paymentCode;
            this.ruleForm.payerCompany = this.info.payerCompany;
            this.ruleForm.payerIdentityNum = this.info.payerIdentityNum;
            this.ruleForm.payerAccount = this.info.payerAccount;
            this.ruleForm.payerBranchBankName = this.info.payerBranchBankName;
            this.ruleForm.paymentId = this.info.paymentId;
            this.ruleForm.paymentCode = this.info.paymentCode; */
          if (this.info.billHave == 1) {
            this.isShowBill = true;
          }
        } else {
          this.taxBrokerageRate = this.info.taxBrokerageRate;
        }
      });
      this.$axios.get(api.brokerRecord + id).then(res => {
        this.records = res;
        for (let item of res) {
          if (item.system == "H3 BPM系统") {
            if (item.auditStatus == 0) {
              item.auditStatus = "审核中";
            } else if (item.auditStatus == 1) {
              item.auditStatus = "审核成功";
            } else {
              item.auditStatus = "审核失败";
            }
          } else {
            if (item.auditStatus == 1) {
              item.auditStatus = "待审核";
            } else if (item.auditStatus == 2) {
              item.auditStatus = "运营审核通过";
            } else if (item.auditStatus == 3) {
              item.auditStatus = "财务审核通过";
            } else if (item.auditStatus == 4) {
              item.auditStatus = "运营审核拒绝";
            } else if (item.auditStatus == 5) {
              item.auditStatus = "财务审核拒绝";
            } else {
              item.auditStatus = "H3审核拒绝";
            }
          }
          if (item.roleType == 1) {
            item.roleType = "经纪人";
          } else if (item.roleType == 2) {
            item.roleType = "运营人员";
          } else if (item.roleType == 3) {
            item.roleType = "财务人员";
          }
        }
      });
    },
    orderList() {
      this.$axios.post(api.brokerOrderList, this.form).then(res => {
        for (let item of res.data.list) {
          if (typeof item.brokerageProportion === "number") {
            item.brokerageProportion = item.brokerageProportion + "%";
          }
        }
        this.tableData = res.data.list;

        if (res.totalRow.customerPhone == null) {
          res.totalRow.customerPhone = "——";
        }
        let obj = res.totalRow;

        Object.keys(obj).forEach(val => {
          if (obj[val] === "" || obj[val] === null) {
            obj[val] = "——";
          }
        });
        if (res.data.list.length > 0) {
          this.tableData.unshift(obj);
        }
        this.total = res.data.total;
      });
    },
    handleSizeChange(size) {
      this.form.pageSize = size;
      this.orderList();
    },
    handleCurrentChange(page) {
      this.form.pageNum = page;
      this.orderList();
    },
    // 重新提交
    againSubmit() {
      this.req(true);
    },
    // 驳回
    RejectSubmit() {
      if (this.reason === "") {
        return this.$message.error("调整说明必填");
      } else {
        this.ruleForm = {};
      }
      this.req(false);
    },
    // 取消提交
    cancelSubmit() {
      this.$router.go(-1);
    },
    // 同意
    agree() {
      let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
      if (role == "运营人员") {
        this.req(true);
      } else {
        // 财务通过跳转页面
        let form = {};
        form["taxBrokerageRate"] = this.taxBrokerageRate;
        form["reason"] = this.reason;
        this.$router.push({
          path: "./applicationAssessment",
          query: { id: this.info.id, type: 8, form: JSON.stringify(form) }
        });
      }
    },
    // 拒绝
    refuse() {
      if (this.reason === "") {
        return this.$message.error("审核理由必填");
      } else {
        this.ruleForm = {};
      }
      let role = JSON.parse(window.localStorage.getItem("cmsUser")).roleName;
      if (role == "运营人员") {
        this.req(false);
      } else {
        this.ruleForm = {};
        this.ruleForm.taxBrokerageRate = this.taxBrokerageRate;
        this.req(false);
      }
    },
    req(bool) {
      this.ruleForm.auditStatus = bool;
      this.ruleForm.applyId = this.info.id;
      this.ruleForm.reason = this.reason;
      this.$axios.post(api.brokerAuditsh, this.ruleForm).then(res => {
        this.$message({ type: "success", message: "操作成功" });
        this.$router.push({ path: "./brokerCommission" });
      });
    }
  }
};
</script>
<style lang="stylus">
.brokerDetail {
  .tables {
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;

    tr td {
      border: 1px solid #ccc;
      line-height: 30px;
      box-sizing: border-box;
      padding: 0 3px;
      text-align: center;
    }
  }

  .tables tr:nth-child(1) {
    background: #f2f2f2;

    td {
      width: 25%;
    }
  }

  .commissionInfo {
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;

    tr td {
      border: 1px solid #ccc;
      line-height: 30px;
      box-sizing: border-box;
      padding: 0 3px;
      text-align: center;
    }

    tr td:nth-child(even) {
      text-align: left;
      box-sizing: border-box;
      padding-left: 15px;
    }

    tr td:nth-child(odd) {
      line-height: 40px;
      width: 25%;
    }
  }

  .collectioAndPayment {
    font-size: 15px;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;

    tr td {
      border: 1px solid #ccc;
      line-height: 30px;
      box-sizing: border-box;
      padding: 0 3px;
      text-align: center;
      width: 16.6%;
    }

    tr td:nth-child(odd) {
      background: #f2f2f2;
    }
  }

  .item-group {
    padding-left: 15px;
    font-size: 14px;
  }

  .item-group img {
    margin-right: 15px;
    max-width: 250px;
    max-height: 250px;
  }

  .item-group span {
    margin-right: 10%;
  }

  .textTitle {
    font-size: 15px;
    line-height: 40px;
    font-weight: bold;
    margin-top: 15px;
  }

  .AudiReason {
    position: relative;
  }

  .resasonNum {
    position: absolute;
    bottom: 60px;
    right: 12px;
    color: #666;
  }

  .technologicalProcess {
    font-size: 14px;
    width: 60%;
    margin: 0 auto;
  }

  .Payment {
    color: #409EFF;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: -5px;

    i {
      margin-right: 5px;
    }
  }
}
</style>

